<template>
  <div>
    <titleTop :titleTxet="titleTxet"></titleTop>
    <ul>
      <li v-for="(item,index) in videoData" :key="index">
        <div class="img">
          <img :src="item.thumb" alt="数据加载失败">
          <img @click="playVideo(item)" :src="'./static/lyl/video.png'" alt="">
        </div>
        <p>{{item.video_title}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
  import titleTop from "../../com/title";
  import * as list from "../../../api/list.js";
  export default {
    name: "PastWonderful",
    components: { titleTop },
    data(){
      return {
        titleTxet: {
          titleName: "往期精彩",
          IsBool: true,
          IsShare: false
        },
        videoData:[]
      }
    },
    beforeMount(){
      //往期精彩
      let parmmm = {active_id:this.$route.query.id,type:2};
      list.activeVideo(parmmm).then(res=>{
        console.log('往期精彩',res);
        this.videoData = res.data
      });
    },
    methods:{
      playVideo(item){
        this.$router.push('/video2/'+item.id+'/'+this.$route.query.id)
      }
    }
  }
</script>

<style scoped>
  ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 20px 40px;
  }
  ul li .img{
    width: 320px;
    height: 200px;
    background: #dcdcdc;
    position: relative;
  }
  ul li .img img:nth-child(1){
    width: 320px;
    height: 200px;
  }
  ul li .img img:nth-child(2){
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 54px;
  }
  ul li p{
    font-size: 28px;
    padding: 20px 0;
    text-align: center;
  }
</style>
